<template>
  <svg t="1745995408822" class="icon" viewBox="0 0 1075 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2789" data-spm-anchor-id="a313x.search_index.0.i18.304d3a81Q0EVhE" :width="`${state.option.width}`" :height="`${state.option.height}`">
    <path d="M508.928 568.832L51.2 333.824c-22.016-8.704-32.256-33.28-23.552-55.296 4.096-10.752 12.8-19.456 23.552-23.552L503.808 19.968c18.432-9.728 40.448-9.728 58.88 0l460.8 235.008c22.016 8.704 32.256 33.28 23.552 55.296-4.096 10.752-12.8 19.456-23.552 23.552l-453.632 235.008c-18.944 10.24-41.984 10.24-60.928 0z" :fill="`${cmap.iconColor[2]}`" p-id="2790" data-spm-anchor-id="a313x.search_index.0.i15.304d3a81Q0EVhE" class=""></path>
    <path d="M1050.112 513.024c0-36.352-38.4-59.392-70.144-43.008L578.56 678.4c-24.064 11.776-52.736 11.776-76.8 0L94.72 469.504C62.976 452.608 24.576 476.16 24.576 512c0 17.92 10.24 34.816 26.112 43.008L501.76 786.944c24.064 12.8 52.736 12.8 76.8 0l445.952-230.912c15.872-8.704 25.6-25.088 25.6-43.008z" :fill="`${cmap.iconColor[1]}`" p-id="2791" data-spm-anchor-id="a313x.search_index.0.i16.304d3a81Q0EVhE" class=""></path>
    <path d="M1050.112 728.064c0-36.352-38.4-59.392-70.144-43.008L578.56 893.44c-24.064 11.776-52.736 11.776-76.8 0l-407.04-208.896c-32.256-16.384-70.144 6.656-70.144 43.008 0 17.92 10.24 34.816 26.112 43.008L501.76 1001.984c24.064 12.8 52.736 12.8 76.8 0l445.952-230.912c15.872-8.192 25.6-25.088 25.6-43.008z" :fill="`${cmap.iconColor[0]}`" p-id="2792" data-spm-anchor-id="a313x.search_index.0.i17.304d3a81Q0EVhE" class="selected"></path>
  </svg>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts";
import {getColorFromLocal} from "../../../package/style/css.ts";
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const state=reactive({
  option:{
    height:10,
    width:20,
    left:10,
    top:10,
  },
  window:{
    height:1700,
    width:800,
  },
})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
  }
  getWH()
}
watch(()=>props.option,(newValue,oldValue)=>{
  setting()
},{immediate:true,deep:true})
window.addEventListener('resize',()=>{
  getWH()
})
function getWH(){
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  state.option.height=(props.option.height/100)*state.window.height
  state.option.width=(props.option.width/100)*state.window.width
}

const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
</script>

<style scoped>
.icon{
  position: absolute;
  left: v-bind(left);
  top:v-bind(top);
}
</style>
